<template>
  <a-modal
    :open="consumptionModel"
    title="会员消费"
    :width="700"
    :maskClosable="false"
    :confirmLoading="createLoading"
    @ok="submitCreate"
    @cancel="cancelCreate"
  >
    <a-divider />
    <a-row class="member-info">
      <a-col :offset="2">姓名：{{ actionItem.vipName }}</a-col>
      <a-col :offset="1">手机号: {{ actionItem.vipMobile }}</a-col>
      <a-col :offset="1">充值日期: {{ actionItem.rechargeDate }}</a-col>
    </a-row>
    <a-form
      name="basic"
      ref="consumptionFormRef"
      :model="consumptionForm"
      :rules="consumptionFormRules"
      :label-col="{ style: { width: '120px' } }"
      autocomplete="off"
    >
      <a-form-item label="消费日期" name="consumeTime">
        <a-date-picker v-model:value="consumptionForm.consumeTime" class="input-01" show-time />
      </a-form-item>
      <a-form-item label="消费类型" name="consumeType">
        <a-radio-group
          v-model:value="consumptionForm.consumeType"
          name="radioGroup"
          @change="handleConsumeTypeChange"
        >
          <a-radio value="SITE_ORDER">订场</a-radio>
          <a-radio value="OTHER_ORDER">其他</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="消费时长"
        name="consumeHours"
        v-if="consumptionForm.consumeType === 'SITE_ORDER'"
      >
        <a-input-number
          v-model:value="consumptionForm.consumeHours"
          addon-after="小时"
          :min="0.1"
          :precision="1"
        />
      </a-form-item>
      <a-form-item label="单价" name="unitPrice">
        <a-input-number
          v-model:value="consumptionForm.unitPrice"
          addon-after="¥"
          :min="0.1"
          :precision="2"
        />
      </a-form-item>
    </a-form>
    <a-divider />
  </a-modal>
</template>
<script setup lang="ts" name="MemberCreate">
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { computed, reactive, ref, watch, type UnwrapRef } from 'vue'
import dayjs from 'dayjs'
import type { ConsumptionForm, TableItem } from '#/member-management'
import { addOrUpdateMemberConsumption } from '@/api/member-management'

const emit = defineEmits(['update:consumptionModel', 'consumptionSuccess'])
const props = defineProps({
  consumptionModel: {
    type: Boolean,
    default: false
  },
  actionItem: {
    type: Object,
    default: () => {}
  }
})
const consumptionModel = computed(() => props.consumptionModel)
const actionItem = computed(() => props.actionItem as TableItem)
const createLoading = ref(false)
const consumptionFormRef = ref()
const consumptionForm: UnwrapRef<ConsumptionForm> = reactive({
  vipId: 0,
  consumeTime: dayjs(),
  consumeType: 'SITE_ORDER',
  consumeHours: undefined,
  unitPrice: undefined
})
const consumptionFormRules: Record<string, Rule[]> = {
  consumeTime: [{ required: true, message: '请选择消费日期', trigger: 'blur' }],
  consumeType: [{ required: true, message: '请选择消费类型', trigger: 'blur' }],
  consumeHours: [{ required: true, message: '请输入消费时长', trigger: 'change' }],
  unitPrice: [{ required: true, message: '请输入单价', trigger: 'change' }]
}

const submitCreate = () => {
  consumptionFormRef.value.validate().then(() => {
    createLoading.value = true
    addOrUpdateMemberConsumption(consumptionForm)
      .then(() => {
        message.success('新增会员消费记录成功！')
        emit('consumptionSuccess')
        cancelCreate()
      })
      .catch(() => {
        createLoading.value = false
      })
  })
}

const cancelCreate = () => {
  consumptionFormRef.value.resetFields()
  emit('update:consumptionModel', false)
  createLoading.value = false
}

const handleConsumeTypeChange = () => {
  if (consumptionForm.consumeType === 'OTHER_ORDER') {
    consumptionForm.consumeHours = 1
  }
}

watch(
  () => props.consumptionModel,
  (val) => {
    if (val) {
      consumptionForm.consumeTime = dayjs()
      consumptionForm.vipId = actionItem.value.id
    }
  }
)
</script>
<style lang="less" scoped>
.input-01 {
  width: 400px;
}
.member-info {
  height: 50px;
}
</style>
